<template>
    <div>
       <!-- tab栏 -->
       <div class="head">
    		<image :src="src1" class="headd" resize="cover" @click="biu()"></image>
    		<text class="head1">设置服务电话</text>
    		<text class="head2" @click="biubiu()">确定</text>
    	</div> 
    	<!-- <text class="shop_name">店铺名称只能改三次哦</text> -->
    	<div class="shop_title_text">
           <input type="text" class="shop_title_inp" placeholder="请输入店铺的服务电话"	
           v-model="shopnamecontent" v-on="biubiubiu()"/>
       </div>
       <text class="name_title">小贴士: 客人可能会通过电话咨询业务，请确认电话</text>
       <text class="name_title1">号码正确，如果您未填写，默认设置为您注册时的手</text>
       <text class="name_title1">机号码为客服电话</text>
        <!-- 弹窗 -->
        <div class="wrap" v-if="show_forget">
          <div class="wqqq" v-if="show_forget"></div>
          <div class="wrap-1">
            <div class="wrap-2">
              <text class="wrap-3">嗨呀！电话号码格式不正确</text>
              <div class="wrap-4">
                <text @click="forget()" class="zhaohui11">重新填写</text>
              </div>
            </div>
          </div>
       </div>
        <!-- 佛祖保佑，永无bug -->
    </div>
</template>
<style scoped>
    .head{
    	width: 100%;
    	height: 48px;
    	padding-top: 12px;
    	/*background-color: pink;*/
    	box-sizing: border-box;
    	line-height: 32px;
    	flex-direction: row;
    	justify-content: center;
    	align-items: center;
    	/*margin-top: 17px;*/
    	position: fixed;
    	top: 0;
    	left: 0;
    	box-shadow: 1px 1px 1px #ccc;
    	background-color: #fff;
    	/*position: relative;*/
    	z-index: 2;	
    }
    .headd{
    	width: 15px;
    	height: 20px;
    	/*background-color: #33c179;*/
    	/*position: fixed;*/
    	position: absolute;
    	left: 12px;
    }
    .head2{
    	position: absolute;
    	right: 12px;
    	margin-left: 80px;
    	font-size: 20px;
    	/*color: #000;*/
    	font-weight: bold;
    }
    .head1{
    	font-size: 20px;
    	font-weight: bold;
    }
    .shop_name{
    	width: 100%;
    	height: 16px;
    	padding-left: 16px;
    	color: #f64242;
    	margin-top: 70px;
    	line-height: 16px;
    	font-weight: bold;
    }
    .shop_title_text{
        width: 300px;
        height: 42px;
        /*background-color: pink;*/
        border-bottom: solid 1px #d2d2d2; 
        margin: auto;
        margin-top: 145px;
        flex-direction: row;
    }
    .shop_title_inp{
        width: 100%;
        text-align: center;
        outline: none;
        border: none;
    }
    .name_title{
    	margin: auto;
    	margin-top: 13px;
    	font-size: 13px;
    	color: #33c179;
    }
    .name_title1{
    	margin: auto;
    	margin-top: 3px;
    	font-size: 13px;
    	color: #33c179;
    }
    .wrap{
      width: 100%;
      height: 100%;
      position: fixed;
      /*background-color: #000;*/
      z-index: 9999;
      justify-content: center;
      align-items: center;
      opacity: 1;
    }
    .wqqq{
      width: 100%;
      height: 100%;
      position: fixed;
      background-color: #000;
      z-index: 99;
      opacity: .8;
      justify-content: center;
      align-items: center;
    }
    .wrap-1{
      width: 237px;
      height: 128px;
      border-radius: 10px;
      /*background-image: url(http://192.168.2.123:8080/img/dialog_one.png);*/
      background-size: 237px 168px;
      opacity: 1;
      box-sizing: border-box;
      padding-top: 20px;
      z-index: 99;
      background-color: #fff;
    }
    .wrap-2{
      width: 200px;
      height: 100px;
      justify-content: center;
      align-items: center;
      margin-left: 23px;
      opacity: 1;
    }
    .wrap-3{
      justify-content: center;
      align-items: center;
      font-size: 14px;
      opacity: 1;
    }
    .wrap-4{
      flex-direction: row;
      width: 220px;
      height: 31px;
      margin-top: 24px;
      justify-content: space-around;
      /*background-color: pink;*/
      align-items: center;
      opacity: 1;
    }
    .zhaohui11{
      width: 83px;
      height: 31px;
      border-radius: 25px;
      background-color: #33c179;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 16px;
      text-align: center;
      line-height: 31px;
      opacity: 1;
    }
</style>
<script>
export default {
    data () {
        return {
          src1: 'http://192.168.2.123:8080/img/index_back.png',
          shopnamecontent: '',
          show_forget: false, //遮罩层
        }
    },
    methods: {
    	// 点击返回
     	biu(){
     		this.$router.back(-1);
     	},
     	// 点击确定
     	biubiu(){
     	    const info = {
     	        shopPhone:this.shopnamecontent
            };
            localStorage.setItem("shopPhone",JSON.stringify(info));
     		this.$router.push('/setShopInfo');
     	},
     	// 检测输入框的值
     	biubiubiu(){
     		// console.log(this.shopnamecontent);
     	},
     	// 点击重新填写
     	forget(){
     		this.show_forget = false;
     	}
    }
}
</script>